<template>
  <div>
    <div v-if="height && width">
      <img
        v-if="picNotNull()"
        :src="checkFileUrl(pic)"
        :style="{'height': height, 'width': width}"
        alt
        @error="handlePicError"
      >
      <img
        v-else
        src="@/assets/img/def.png"
        :style="{'height': height, 'width': width}"
        alt
      >
    </div>
    <div v-else-if="width">
      <img
        v-if="picNotNull()"
        :src="checkFileUrl(pic)"
        :style="{'width': width}"
        alt
        @error="handlePicError"
      >
      <img
        v-else
        src="@/assets/img/def.png"
        :style="{'width': width}"
        alt
      >
    </div>
    <div v-else-if="height">
      <img
        v-if="picNotNull()"
        :src="checkFileUrl(pic)"
        :style="{'height': height}"
        alt
        @error="handlePicError"
      >
      <img
        v-else
        src="@/assets/img/def.png"
        :style="{'height': height}"
        alt
      >
    </div>
    <div v-else>
      <img
        v-if="picNotNull()"
        :src="checkFileUrl(pic)"
        alt
        @error="handlePicError"
      >
      <img
        v-else
        src="@/assets/img/def.png"
        alt
      >
    </div>
  </div>
</template>

<script setup>
import defImg from '@/assets/img/def.png'
const props = defineProps({
  pic: {
    default: null,
    type: String
  },
  height: {
    default: null,
    type: [String, Number]
  },
  width: {
    default: null,
    type: [String, Number]
  }
})

const picNotNull = () => {
  return !!props.pic
}

const handlePicError = (event) => {
  event.target.src = defImg
}

</script>
